<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>setInterval:定时执行</h1>
    <p>以同样的频率重复执行函数。</p>
    <h2>使用方式</h2>
    <ul>
        <li>setInterval(函数,固定频率毫秒数)</li>
        <li>setInterval("函数()",固定频率毫秒数)</li>
    </ul>
    <p>setInterval返回：返回一个id对象，用于作为clearInterval的参数，以停止定时执行任务。</p>
    <button onclick="startInterval()">改变颜色</button>
    <button onclick="stopInterval()">停止颜色改变</button>
    <p id="p1"></p>
    <h2>作业</h2>
    <dl>
        <dt>必做</dt>
        <dt>使用定时执行，每个一秒钟切换图片（可以用img标签或者background-image属性制作）</dt>
        <dt>选做</dt>
        <dt>制作划入划出的切换图片效果。</dt>
    </dl>
    <script>
        let a = ["我一定会回来的","信仰是为了虚无的人类","代表月亮消灭你","变身超级赛亚人"];
        let p = document.querySelector("#p1");
        let i = 0;

        // 每隔1000毫秒，执行函数，这里使用匿名函数的方式
        setInterval(function() {
            p.innerText = a[i ++];
            if (i >= a.length) {
                i = 0;
            }
        },1000);

        // 获取在n和m之间的随机数值
    function getRandom(m, n) {
        return Math.floor(Math.random() * (n - m + 1) + m);
    }

    function getColor() {
        let r = getRandom(0, 255);
        let g = getRandom(0, 255);
        let b = getRandom(0, 255);
        // let和var的区别
        // return "rgb(" + r + "," + g + "," + b + ")";
        // ES6模板字符串写法：
        return `rgb(${r},${g},${b})`;
    }

    function changeColor() {
        p.style.color = getColor();
    }

    let intervallId = null;

    function startInterval() {
        if (null == intervallId) {
            intervallId = setInterval(changeColor,1000);
        }
    }

    function stopInterval() {
        if (null != intervallId) {
            // clearInterval：通过传入的id，停止定时任务
            clearInterval(intervallId);
            intervallId = null;
        }
    }
    </script>
</body>
</html>